<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>PhotoSphereViewer - markers layers demo</title>

        <link rel="stylesheet" href="/dist/core/index.css" />
        <link rel="stylesheet" href="/dist/markers-plugin/index.css" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="photosphere"></div>

        <script type="importmap">
            {
                "imports": {
                    "three": "/node_modules/three/build/three.module.js",
                    "@photo-sphere-viewer/core": "/dist/core/index.module.js",
                    "@photo-sphere-viewer/markers-plugin": "/dist/markers-plugin/index.module.js"
                }
            }
        </script>

        <script type="module">
            import { Viewer } from '@photo-sphere-viewer/core';
            import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';

            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';

            const viewer = new Viewer({
                container: 'photosphere',
                panorama: baseUrl + 'artist-workshop.jpg',
                caption: 'Artist Workshop <b>&copy; Oliksiy Yakovlyev (HDRI Haven)</b> & Rick Astley',
                loadingImg: baseUrl + 'loader.gif',
                defaultYaw: 2.45,
                defaultPitch: 0.1,
                plugins: [
                    [MarkersPlugin, {
                        markers: (() => {
                            const a = [];

                            const iframe = document.createElement('iframe');
                            iframe.src = 'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?si=h2PQuWtQtGzNxMm?autoplay=0';
                            iframe.width = '640px';
                            iframe.style.aspectRatio = `${16/9}`;
                            iframe.style.border = '10px inset #7d4200';

                            const div = document.createElement('div');
                            div.style.width = '160px';
                            div.style.height = '160px';
                            div.style.background = 'red';

                            a.push({
                                id: 'div',
                                elementLayer: div,
                                position: { yaw: -0.13, pitch: 0.41},
                                rotation: { yaw: 0.8 },
                                tooltip: 'A red square',
                                opacity: 0.5,
                            });

                            a.push({
                                id: 'iframe',
                                elementLayer: iframe,
                                position: { yaw: -0.7, pitch: 0.32},
                                rotation: { yaw: -0.2 },
                            });
                            
                            a.push({
                                id: 'video',
                                videoLayer: baseUrl + 'pictos/rick.webm',
                                position: [
                                    { yaw: 2.90978, pitch: 0.25583 }, { yaw: 3.20036, pitch: 0.25220 },
                                    { yaw: 3.20567, pitch: -0.28784 }, { yaw: 2.92182, pitch: -0.31297 },
                                ],
                                style: {
                                    cursor: 'pointer',
                                },
                                tooltip: 'Play / Pause',
                            });

                            a.push({
                                id: 'video-greenscreen',
                                videoLayer: baseUrl + 'pictos/t-rex.mp4',
                                position: { yaw: 1.7, pitch: -0.1 },
                                size: { width: 300, height: 300 },
                                zIndex: 100,
                                chromaKey: {
                                    enabled: true,
                                    color: '#009200',
                                    similarity: 0.1,
                                },
                            });

                            [
                                [
                                    { yaw: 2.17063, pitch: 0.47556 }, { yaw: 2.47392, pitch: 0.47121 },
                                    { yaw: 2.47818, pitch: 0.24468 }, { yaw: 2.17698, pitch: 0.24809 },
                                ],
                                [
                                    { yaw: 2.53028, pitch: 0.45475 }, { yaw: 2.73576, pitch: 0.42324 },
                                    { yaw: 2.72772, pitch: 0.25040 }, { yaw: 2.52465, pitch: 0.27152 },
                                ],
                                [
                                    { yaw: 2.52182, pitch: 0.22277 }, { yaw: 2.71813, pitch: 0.20591 },
                                    { yaw: 2.71176, pitch: 0.04947 }, { yaw: 2.51667, pitch: 0.05490 },
                                ],
                                [
                                    { yaw: 2.24036, pitch: 0.21062 }, { yaw: 2.42582, pitch: 0.20913 },
                                    { yaw: 2.42649, pitch: 0.05818 }, { yaw: 2.24091, pitch: 0.05868 },
                                ],
                                [
                                    { yaw: 1.95249, pitch: 0.46809 }, { yaw: 2.11880, pitch: 0.48289 },
                                    { yaw: 2.12564, pitch: 0.28968 }, { yaw: 1.96142, pitch: 0.27917 },
                                ],
                                [
                                    { yaw: 2.35634, pitch: -0.08720 }, { yaw: 2.50943, pitch: -0.08660 },
                                    { yaw: 2.51593, pitch: -0.27962 }, { yaw: 2.35963, pitch: -0.28636 },
                                ],
                                [
                                    { yaw: 1.97055, pitch: 0.24636 }, { yaw: 2.12267, pitch: 0.25273 },
                                    { yaw: 2.12077, pitch: 0.14738 }, { yaw: 1.97077, pitch: 0.14508 },
                                ],
                                [
                                    { yaw: 1.73189, pitch: 0.44483 }, { yaw: 1.91183, pitch: 0.47555 },
                                    { yaw: 1.91775, pitch: 0.34020 }, { yaw: 1.73849, pitch: 0.31800 },
                                ],
                                [
                                    { yaw: 1.77034, pitch: 0.29604 }, { yaw: 1.88900, pitch: 0.30949 },
                                    { yaw: 1.89234, pitch: 0.13656 }, { yaw: 1.77210, pitch: 0.13185 },
                                ],
                                [
                                    { yaw: 1.75644, pitch: 0.10757 }, { yaw: 1.89867, pitch: 0.11271 },
                                    { yaw: 1.90351, pitch: 0.00480 }, { yaw: 1.76327, pitch: 0.00579 },
                                ],
                            ].forEach((position, i) => {
                                a.push({
                                    id: 'image' + i,
                                    imageLayer: baseUrl + 'pictos/rick.jpg',
                                    position,
                                });
                            });

                            return a;
                        })(),
                    }],
                ],
            });

            const markers = viewer.getPlugin(MarkersPlugin);

            markers.addEventListener('select-marker', ({ marker }) => {
                if (marker.id === 'video') {
                    if (marker.video.paused) {
                        marker.video.play();
                    } else {
                        marker.video.pause();
                    }
                }
            });

            markers.addEventListener('enter-marker', ({ marker }) => {
                console.log('enter', marker.id);
            });

            markers.addEventListener('leave-marker', ({ marker }) => {
                console.log('leave', marker.id);
            });

            markers.addEventListener('marker-visibility', ({ marker, visible }) => {
                console.log('marker-visibility', marker.id, visible);
            });

            window.viewer = viewer;
        </script>
    </body>
</html>
